<template>
    <div class="account-box">
          <div class="form">
            <el-form ref="formRef" :model="user" :rules="rules" label-position="right" label-width="60px" status-icon>
              <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="user.password"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="agree" label-width="22px">
                <el-checkbox size="large" v-model="form.agree">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item> -->
              <el-button size="large" class="subBtn" @click="login">点击登录</el-button>
            </el-form>
          </div>
          <div class="action">
      <img
        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
        alt=""
      />
      <div class="url">
        <a href="javascript:;">忘记密码</a>
        <a href="javascript:;" @click="$router.push('/register')">免费注册</a>
      </div>
    </div>
      </div>
      
</template>
<script>
export default {
  name: "LoginForm",
  data() {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    login() {
      if (this.user.username === '' || this.user.password === '') {
                // 使用 Element UI 的消息组件给出错误提示
                this.$message.error("账号或密码不能为空");
                return false; // 结束函数执行
            }
      this.request.post("/login", this.user).then(res => {
                // 服务器响应后的处理
                // 检查返回的状态码是否为 '200'，即请求成功
                if (res.code === '200') {
                    // 显示成功消息提示
                    this.$message.success({message: "登陆成功", showClose: true});

                    // 跳转到预定的页面，可能是主页或之前访问的页面
                    this.$router.push('/topView');

                    // 将服务器返回的用户数据保存到浏览器的 localStorage
                    localStorage.setItem("user", JSON.stringify(res.data));
                } else {
                    // 如果返回的状态码不是 '200'，则显示服务器返回的错误消息
                    this.$message.error(res.msg);
                }
            });
    },
    register(){},
  },
};
</script>

<style lang="less">
.account-box {
    padding: 40px 20px 30px 20px;
    text-align: right;
    a {
      color: #27BA9B;
      i {
        font-size: 14px;
      }
  }
  .form {
    padding: 0 20px 40px 20px;
    &-item {
      margin-bottom: 28px;
      .input {
        position: relative;
        height: 36px;
        >i {
          width: 34px;
          height: 34px;
          background: #cfcdcd;
          color: #fff;
          position: absolute;
          left: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 18px;
        }
        input {
          padding-left: 44px;
          border: 1px solid #884545;
          height: 36px;
          line-height: 36px;
          width: 100%;
          &.error {
            border-color: #CF4444;
          }
          &.active,
          &:focus {
            border-color: #27BA9B;
          }
        }
        .code {
          position: absolute;
          right: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          background: #f5f5f5;
          color: #666;
          width: 90px;
          height: 34px;
          cursor: pointer;
        }
      }

      >.error {
        position: absolute;
        font-size: 12px;
        line-height: 28px;
        color: #CF4444;

        i {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }

    .agree {
      a {
        color: #069;
      }
    }

    .btn {
      display: block;
      width: 100%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background: #27BA9B;

      &.disabled {
        background: #cfcdcd;
      }
    }
  }

  .action {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .url {
      a {
        color: #999;
        margin-left: 10px;
      }
    }
  }
}
.subBtn {
  background: #27BA9B;
  width: 100%;
  color: #fff;
}
</style>
